<style scoped>
.item-title {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    font-size: var(--el-font-size-large);
    font-weight: bold;
    border-bottom: 1px solid var(--el-border-color);
    margin-bottom: 1rem;
}

.active {
    /* background-color: cornsilk; */
    background-color: cadetblue;
}

.active_dark {
    background-color: darkslategray;
}
</style>

<template>
    <el-container class="h-full">
        <el-main class="border-r-1 border-b-1 padding-0 h-0">
            <el-container style="height: 100%;">
                <el-header>
                    <div class="item-title" @dblclick="backtopHandler">
                        <p>{{ itemTitle.title }}</p>
                    </div>
                </el-header>
                <el-main v-loading="loading">
                    <el-scrollbar ref="itemScrollbarRef">
                        <div ref="itemInnerRef" v-if="detailsList.length > 0">
                            <el-row justify="center" class="margin-b-1rem" v-for="details in detailsList">
                                <el-col :span="23">
                                    <el-card
                                        :class="[details.id == selectId ? (store.dark ? 'active_dark' : 'active') : '']"
                                        shadow="hover" @click="clickItem(details)">
                                        <el-row align="middle" justify="space-between">
                                            <el-col :span="20">{{ details.title }}</el-col>
                                            <!-- <el-col
                                                :span="4"
                                                style="text-align: right;"
                                            >{{ store.folderList.find(e => e.id == details.folderId)?.name }}</el-col> -->
                                        </el-row>
                                    </el-card>
                                </el-col>
                            </el-row>
                        </div>
                        <el-empty v-else description="空的" />
                    </el-scrollbar>
                </el-main>
            </el-container>
        </el-main>
        <el-footer class="border-r-1 padding-0 footer-opt">
            <el-row class="h-full" align="middle" justify="center">
                <el-col :span="22">
                    <el-button size="large" type="primary" plain style="width: 100%;" @click="showAddDetailsWin">添加
                    </el-button>
                </el-col>
            </el-row>
        </el-footer>
    </el-container>
</template>

<script lang="ts" setup>
import { storeToRefs } from 'pinia';
import { onMounted, ref, watch } from 'vue';
import { Details, Optional } from '../assets/core';
import { useStore } from '../main';
import type { ElScrollbar } from 'element-plus'

const loading = ref(false);

const store = useStore();
const { selectMenuIndex, refreshItem } = storeToRefs(store);

const detailsList = ref<Details[]>([]);
const getDetailsList = async (p: Details) => {
    loading.value = true;
    detailsList.value = await store.pwdmApi.detailsList(p);
    loading.value = false;
};
onMounted(() => {
    getDetailsList({ deleted: 0 });
});

const itemInnerRef = ref<HTMLDivElement>();
const itemScrollbarRef = ref<InstanceType<typeof ElScrollbar>>();//滚动条对象
/**
 * 回到顶部
 */
const backtopHandler = () => {
    itemScrollbarRef.value!.setScrollTop(0);
};
/**
 * 监听refreshItem的变化，及时刷新列表
 */
watch(refreshItem, (newVal, oldVal) => {
    if (newVal) {
        if (detailsList.value.findIndex(e => e.id == store.selectDetails.id) == -1) {
            //直接新增
            detailsList.value.push(store.selectDetails);
            //TypeScript中!.表示强调itemInnerRef.value这个值100%存在
            setTimeout(() => {
                itemScrollbarRef.value!.setScrollTop(itemInnerRef.value!.clientHeight - 380);
                selectId.value = store.selectDetails.id;
            }, 500);
        } else {
            if (store.selectDetails.deleted == 1) {
                //删除操作，直接刷新页面
                getDetailsList(itemTitle.value.param);
            }
        }
        refreshItem.value = false;
    }
});
/**
 * 监听选中的菜单id，及时刷新列表
 */
const itemTitle = ref<{ param: Details, title: string }>({ param: { deleted: 0 }, title: "所有记录" });
watch(selectMenuIndex, async (newValue, oldValue) => {
    let p: Details = { deleted: 0 };
    switch (newValue) {
        case "2":
            itemTitle.value.title = "所有记录";
            break;
        case "3":
            itemTitle.value.title = "我的收藏";
            p.star = 1;
            break;
        case "4":
            itemTitle.value.title = "回收站";
            p.deleted = 1;
            break;
        default:
            if (newValue.startsWith("1-")) {
                p.folderId = Number(newValue.replace("1-", ""));
                let folder = await store.pwdmApi.folderQuery(p.folderId);
                itemTitle.value.title = Optional.ofNullable<string>(folder.name).orElse("");
            }
    }
    itemTitle.value.param = p;
    getDetailsList(p);
});

/**
 * 新增项目
 */
const showAddDetailsWin = () => {
    let details: Details = {
        id: null,
        title: '',
        username: '',
        pwd: '',
        addr: '',
        memo: '',
        deleted: 0,
        updateTime: "",
        star: 0,
        sn: 9999,
        folderId: itemTitle.value.param.folderId
    };
    store.detailsWin = 2;
    store.selectDetails = details;
};

/**
 * 选中项目后，展示详情
 */
const selectId = ref<number | null | undefined>(-1); //选中的条目id，用于页面显示选中状态
const clickItem = (details: Details) => {
    selectId.value = details.id;
    store.selectDetails = details;
    store.detailsWin = 1;
};
</script>